// 基于准备好的dom，初始化echarts图表
var xjleftChart2 = echarts.init(document.getElementById('left_chart2'),'macarons');
var seriesdata1 = [
    [
        30,
        40,
        30,
        28,
        35,
        45,
        20,
        30,
        40,
        60,
        30
    ],
    [
        40,
        30,
        40,
        45,
        32,
        35,
        40,
        40,
        30
    ]
];
InitChart( seriesdata1);
function InitChart(value){
    // 指定图表的配置项和数据
    var option = {
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        color:['#fefffa','#00ffff'],
        legend:[
            {

                x:'center',
                top:'1%',
                itemGap: 30,
                data:['实际建链率','可用建链率'],
                textStyle:{
                    color:'#fff',
                    fontSize:40
                }
            }
        ],
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '50',
            right: '80',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                //data:val,
                data:['2018/01','2018/02','2018/03','2018/04','2018/05','2018/06','2018/07','2018/08','2018/09'],
                axisLabel:{
                    show:true,
                    textStyle: {
                        color: '#fff',
                        fontSize:40
                    }

                },
                axisLine:{
                    lineStyle:{
                        color: '#56f0ed',
                        width:10
                    }
                }
            }
        ],
        yAxis :
            {
                name:'帧',
                nameTextStyle:{
                    color:"#fff",
                    fontSize:40
                },

                type : 'value',
                min:0,
                max:100,
                interval:10,
                axisLabel: {
                    show: true,
                    // interval: 'auto',
                    // formatter: '{value}%',
                    // position: 'left',
                    // nameLocation: 'middle',
                    // nameGap: 35,
                    textStyle: {
                        color: '#fff',
                        fontSize:40
                    }
                },
                show: true,
                splitLine:{
                    show:false
                },
                axisLine:{
                    lineStyle:{
                        color: '#56f0ed',
                        width:10
                    }
                }
            },

        series : [
            {
                name:'实际建链率',
                type:'line',
                symbol: 'circle',
                symbolSize: 20,
                //stack: '总量',
                areaStyle: {
                    //color:'#00ffff'
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(254,255,250,0.9)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(254,255,250, 0)'
                        }

                    ])
                },
                data: value[0],

                lineStyle: {
                    width: 10

                },
                // itemStyle:{
                //     normal: {
                //         color: 'rgb(0, 255, 255)',
                //         barBorderRadius: 5,
                //         borderWidth:20,
                //         lineStyle: {
                //             //color:'#e9f888',
                //             width:10// 0.1的线条是非常细的了
                //         }
                //     }
                // }
            },
            {
                name:'可用建链率',
                type:'line',
                symbol: 'circle',
                symbolSize: 20,
                //stack: '总量',
                areaStyle: {
                    //color:'#00ffff'
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(0,255,255,0.9)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(0,255,255, 0)'
                        }

                    ])
                },
                data: value[1],
                lineStyle: {
                    width: 10

                },
                // itemStyle:{
                //     normal: {
                //         color: 'rgb(255, 255, 211)',
                //         barBorderRadius: 5,
                //         borderWidth:20,
                //         lineStyle: {
                //             //color:'#e9f888',
                //             width:10// 0.1的线条是非常细的了
                //         }
                //     }
                // }
            }
        ]
    };
// 使用刚指定的配置项和数据显示图表。
    xjleftChart2.setOption(option);
    window.onresize = function() {//监听div和屏幕的改变
        xjleftChart2.resize();//resize属性指定一个元素是否是由用户调整大小的。
    }
}
setInterval(function() {
    var op = xjleftChart2.getOption();
    var data0 = op.series[0].data;
    console.log(data0);
    var data1 = op.series[1].data;

    op.series[0].data.push(data0.shift());
    op.series[1].data.push(data1.shift());
    //data0.shift();
    //data1.shift();
    //op.xAxis[0].data.shift();
    xjleftChart2.setOption(op);

}, 5000);


